<template>
  <view class="body">
    <view class="title">水表</view>
    <view class="container">
      <view class="item item3">
        <navigator url="../waterSubsidyRecord/waterSubsidyRecord">
          <img class="img" src="../../static/水/03.津贴补贴标准.png" alt="" />
          <text class="text">冷水补助记录</text>
        </navigator>
      </view>

      <view class="item item2">
        <navigator url="../coldwaterRecharge/coldwaterRecharge">
          <img class="img" src="../../static/水/01.水表充值.png" alt="" />
          <text class="text">冷水充值记录</text>
        </navigator>
      </view>

      <view class="item item3">
        <navigator url="../hotwaterRecharge/hotwaterRecharge">
          <img class="img" src="../../static/水/01.水表充值.png" alt="" />
          <text class="text">热水充值记录</text>
        </navigator>
      </view>

      <view class="item item2">
        <navigator url="../coldwaterConsumption/coldwaterConsumption">
          <img class="img" src="../../static/水/02.水表消费.png" alt="" />
          <text class="text">冷水使用记录</text>
        </navigator>
      </view>

      <view class="item item1">
        <navigator url="../hotwaterConsumption/hotwaterConsumption">
          <img class="img" src="../../static/水/02.水表消费.png" alt="" />
          <text class="text">热水使用记录</text>
        </navigator>
      </view>

      <view class="item item4">

      </view>
    </view>

    <view class="title">电表</view>
    <view class="container">
      <!-- 		<view class="item item3">
				<navigator url="../electricSubsidyRecord/electricSubsidyRecord">
					<img class="img" src="../../static/电/03.津贴补贴标准.png" alt="" />
					<text class="text">补助记录</text>
				</navigator>
			</view> -->

      <view class="item item1">
        <navigator url="../electricRecharge/electricRecharge">
          <img class="img" src="../../static/电/01.电表充值.png" alt="" />
          <text class="text">充值记录</text>
        </navigator>
      </view>

      <view class="item item6">
        <navigator url="../electricConsumption/electricConsumption">
          <img class="img" src="../../static/电/02.电表消费.png" alt="" />
          <text class="text">消费记录</text>
        </navigator>
      </view>


    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .body {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .title {

    text-align: center;
    font-weight: bold;
    letter-spacing: 14px;
    font-size: 20px;
    margin: 5% 0;
  }

  .container {
    flex-wrap: wrap;
    width: 85%;
    display: flex;
    height: 100%;
    justify-content: center;
  }

  .item {
    width: 48.5%;
    height: 30%;

  }



  navigator {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 20px auto;
    align-items: center;
  }

  .img {
    width: 6vh;
    height: 6vh;
  }



  .item1 {
    border: 0.1px solid #dadada;
  }

  .item2 {
    border-top: 0.1px solid #dadada;
    border-right: 0.1px solid #dadada;
    border-left: 0.1px solid #dadada;
  }

  .item3 {
    border-top: 0.1px solid #dadada;
    border-left: 0.1px solid #dadada;
  }

  .item4 {
    border-bottom: 0.1px solid #dadada;
    border-right: 0.1px solid #dadada;
  }

  .item5 {
    border-bottom: 0.1px solid #dadada;
    border-left: 0.1px solid #dadada;
  }

  .item6 {
    border-top: 0.1px solid #dadada;
    border-right: 0.1px solid #dadada;
    border-bottom: 0.1px solid #dadada;
  }
</style>